<template>
    <div id="container-demo"></div>
</template>

<script setup>
import { Graph, Shape } from '@antv/x6'
import { onMounted } from 'vue'
onMounted(() => {
    initFun()
})


function initFun() {

    Shape.HTML.register({
        shape: 'custom-html',
        width: 160,
        height: 80,
        html({attrs}) {
            console.log("attrs",attrs)
            const div = document.createElement('div')
            div.className = 'custom-html'
            div.style.backgroundColor = '#000'
            div.style.width = '100px'
            div.style.height = '100px'
            return div
        },
    })

    const graph = new Graph({
        container: document.getElementById('container-demo'),
        grid: true,
        width: '100%',
        height: 900,
    })

    graph.addNode({
        shape: 'custom-html',
        x: 60,
        y: 100,
        attrs: {
           data:"assafsdfdsgvfdsbgfb"
        },
    })

}

</script>
<style scoped lang='scss'></style>